<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件的绑定</title>
    <script>
        window.onload = function(){
            var btn1 = document.getElementById("btn1");
            /*
                使用   对象.事件 = 函数   的形式绑定响应函数，不能绑定多个，如果绑定多个，后面的会覆盖前面的
            */
            /*
                addEventListener()  
                    -通过该方法可以为元素绑定响应函数
                    -参数：
                        1.事件的字符串，不要on
                        2.回调函数
                        3.是否在捕获阶段触发事件，布尔值，一般为false
                    -可绑定多个响应函数，按顺序执行
            */
           btn1.addEventListener("click",function(){
               alert(1);
           },false);
           btn1.addEventListener("click",function(){
               alert(2);
           },false);
        };
        /*
            事件的传播分为三个阶段
            1、捕获阶段
                -在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
            2、目标阶段
                -事件捕获到目标元素，捕获结束开始在目标元素上触发事件
            3、冒泡阶段
                -事件从目标元素向其祖先元素传递，一次触发祖先元素上的事件
            
            
        */
    </script>
</head>
<body>
    <button id="btn1">按钮</button>
</body>
</html>